#app {
  /* height: 200px; */
  width: 100%;
  overflow: hidden;
  /* overflow-y: scroll; */
  border: transparent;
  /*font-family: "Franklin Gothic Medium";*/
  color: #c4c4c4;

}

::selection {
  background: #5e676d;
}

.app {
  /* height: 200px; */
  width: 100%;
  overflow: hidden;
  /* border: transparent; */

  padding-bottom: 50px;
  padding-left: 10px;

  /*padding: 90%;*/
  margin: 0 auto;
  background: #252525;
}

.none-more {
  color: #d2d2d2;
}

@media screen and (min-width: 1590px) {
  /*单个应用模块*/
  .item {
    width: 20%;
    height: 50px;
    float: left;
    transition: all 0.2s;
    margin: 15px;
    color: #dcdcdc;
    overflow: hidden;
    border-radius: 100px;
  }
  .icon-m {
    float: left;
    width: 13%;
    height: 77%;
    background: transparent;
    margin: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
    top: -4px;
  }
  .list {
    max-width: 1500px;
    text-align: center;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1590px) {
  /*单个应用模块*/
  .item {
    width: 20%;
    height: 50px;
    float: left;
    transition: all 0.2s;
    margin: 15px;
    color: #dcdcdc;
    overflow: hidden;
    border-radius: 100px;
  }

  .icon-m {
    float: left;
    width: 13%;
    height: 77%;
    background: transparent;
    margin: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
    top: -4px;
  }
  .list {
    max-width: 1000px;
    text-align: center;
  }
}
@media screen and (max-width: 1512px) and (min-width: 980px) {
  .item {
    width: 30%;
    height: 50px;
    float: left;
    transition: all 0.2s;
    margin: 15px;
    color: #dcdcdc;
    overflow: hidden;
    border-radius: 100px;
  }

  .icon-m {
    float: left;
    width: 40px;
    height: 77%;
    background: transparent;
    margin: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
    top: -4px;
  }

  .list {
    max-width: 1000px;
    text-align: center;
  }
}
@media screen and (max-width: 1000px) {
  .item {
    width: 45%;
    height: 50px;
    float: left;
    transition: all 0.2s;
    margin: 15px;
    color: #dcdcdc;
    overflow: hidden;
    border-radius: 100px;
  }

  .icon-m {
    float: left;
    width: 40px;
    height: 77%;
    background: transparent;
    margin: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
    top: -4px;
  }

  .list {
    max-width: 1000px;
    text-align: center;
  }
}
@media screen and (max-width: 750px) {
  .item {
    width: 70%;
    height: 50px;
    float: left;
    transition: all 0.2s;
    margin: 15px;
    color: #dcdcdc;
    overflow: hidden;
    border-radius: 100px;
  }

  .icon-m {
    float: left;
    width: 40px;
    height: 77%;
    background: transparent;
    margin: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
    top: -4px;
  }

  .list {
    max-width: 1000px;
    text-align: center;
  }
}

.show {
  overflow: hidden;
}
.icon-bg {
  width: 310px;
  height: 105px;
  float: left;
  filter: blur(30px) opacity(0%);
  position: relative;
  top: -100px;
  transition: all 0.3s;
}

.icon-bg:hover {
  filter: blur(20px) opacity(20%);
}

/*应用图标*/

.list {
  max-width: 1500px;
  text-align: center;
}


.item:hover {
  border-radius: 100px;
  background: linear-gradient(145deg, #212121, #282828);
  box-shadow: 47px 47px 94px #191919,
  -47px -47px 94px #313131;
}

.item:active {
  border-radius: 100px;
  background: linear-gradient(145deg, #212121, #282828);
  box-shadow: 5px 5px 10px #1b1b1b,
  -5px -5px 10px #2f2f2f;
}
.app-name {
  font-weight: lighter;
  position: relative;
  top: -5px;

  display: block;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;

  float: left;
}

